<template>
    <div class="code-login-wrap" >
        <van-nav-bar
          title=""
          left-arrow
          fixed
          @click-left="onClickLeft"
        />
		
		
        <div class="title" >
            验证码登录
        </div>
        
        <div class="login-box" >
            <div class="input-box" >
                <div class="input-box__label" >+86</div>
                <div class="input-box__input" >
                    <input v-model="mobile" type="number" placeholder="请输入手机号" >
                </div>
            </div>
            
			<div class="input-box" >
			    <div class="input-box__input" >
			        <input v-model="smsCode" type="text" placeholder="请输入验证码" >
			    </div>
			    <div 
			    v-if="!count"
			     @click="handleToSend" 
			    class="send-code active-btn" >
			    获取验证码
			    </div>
			    <div v-else class="send-code" >
			        {{ count }}s
			    </div>
			</div>
            
            <div class="entry-msg" >
				 <div @click="handleToPassword" class="entry-btn active-btn" >密码登录</div>
            </div>
        </div>
        
        
        <!-- 操作 -->
        <div class="login-btn active-btn" @click="handleToLogin" >登录</div>
        
        
    </div>
</template>

<script>
    import { LOGIN, SEND_CODE } from '@/api/cms';
    import { checkPhone } from '@/tool/methods';
    export default {
        data() {
            return {
                mobile: '',
                smsCode: '',
				// 验证码
				count: 0,
                //操作
                loadBtn: false
            }
        },
        methods: {
			onClickLeft() {
				this.$router.back()
			},
			// 密码登录
			handleToPassword() {
				this.$router.back();
			},
			/**
			 * 点击获取验证码
			 */
			handleToSend() {
			  if(!this.mobile) {
			        this.$toast('请输入手机号')
			        return
			  }
			  
			  if(!checkPhone(this.mobile)) {
			      this.$toast('手机号格式错误')
			      return 
			  }
			
			  // 开启倒计时
			  this.sendCode()
			},
			sendCode() {
			  if(this.count) {
			    return
			  }
			
			  // 事件阻断
			  if (this.loadBtn) {
			    return
			  }
			  this.loadBtn = true
			
			  let params = {};
			      params['account'] = this.mobile;
			      params['scene'] = 0;
			  this.$http.post(SEND_CODE, params)
			    .then(() => {
			      this.$toast.success('发送成功')
			      this.loadBtn = false
			      this.countDown()
			    })
			    .catch(() => {
			      this.loadBtn = false
			    })
			},
			countDown() {
			  this.count = 59;
			  const count_down = (() => {
			    if(this.count <= 0) {
			      return
			    }
			    setTimeout(() => {
			      --this.count
			      count_down()
			    }, 1000)
			  })
			
			  count_down()
			},
			
            /**
             * 登录
             */
            handleToLogin() {
                if(!this.mobile) {
                    this.$toast('请输入手机号')
                    return
                }
                if(!checkPhone(this.mobile)) {
                    this.$toast('手机号格式错误')
                    return 
                }
                if(!this.smsCode.trim()) {
                    this.$toast('请输入验证码')
                    return
                }
              
                
                // 阻断校验
                if (this.loadBtn) {
                  return;
                }
                // 锁住
                this.loadBtn = true;
                
                let params = {};
                    params['username'] = this.mobile;
                    params['password'] = this.smsCode;
                    params['type'] = 'code';
                    params['client_id'] = 'app';
                    
                this.$http.post(LOGIN, params)
                    .then((res) => {
                        this.$toast.success('登录成功');
                        const {
                            access_token,
                            token_type
                        } = res.data;
                        
                        localStorage.setItem('token', `${token_type} ${access_token}`);
                        
                        setTimeout(() => {
                          this.loadBtn = false;
                          // 去登录
                          this.$router.replace({
                              name: 'home'
                          })
                        }, 1000)
                        
                    })
                    .catch(() => {
                        this.loadBtn = false;
                    })
            },
            
        }
    }
</script>

<style lang="scss" >
    .code-login-wrap{
        min-height: 100vh;
		padding-top: 46px;
        background-color: #FFFFFF;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		
        .van-hairline--bottom::after{
            border: none;
        }
        
        .title{
            padding-top: 1.38rem;
            margin-left: 0.64rem;
            font-size: 0.4rem;
            font-weight: 500;
            line-height: 0.56rem;
            color: #333333;
        }
        .login-box{
            width: 6.22rem;
            margin: auto;
            margin-top: 0.92rem;
            .input-box{
                display: flex;
                align-items: center;
                width: 100%;
                height: 1rem;
                padding: 0 0.32rem;
                margin-bottom: 0.32rem;
                border-radius: 0.16rem;
                box-sizing: border-box;
                background-color: #F4F4F4;
                &__label{
                    flex-shrink: 0;
                    position: relative;
                    font-size: 0.32rem;
                    font-weight: 400;
                    color: #333333;
                    &::after{
                        content: '';
                        width: 0.04rem;
                        height: 0.32rem;
                        margin-left: 0.14rem;
                        margin-right: 0.14rem;
                        border: 0.02rem solid #dadada;
                    }
                }
                &__input{
                    height: 100%;
                    flex: 1;
                    input{
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        font-size: 0.32rem;
                        font-weight: 400;
                        border: none;
                        outline: none;
                        background-color: transparent;
                        &::-webkit-input-placeholder {
                            color: #999999 !important;
                        } 
                    }
                }
                .send-code{
                    display: flex;
                    align-items: center;
                    height: 100%;
                    flex-shrink: 0;
                    font-size: 0.28rem;
                    font-weight: 400;
                    margin-left: 0.2rem;
                    color: #666666;
                }
            }
            .entry-msg{
				display: flex;
				justify-content: flex-end;
				
                height: 0.4rem;
                .entry-btn{
                    display: inline-block;
                    color: #333333;
                    font-size: 0.28rem;
                    line-height: 0.4rem;
                }
            }
        }
        
        .login-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 6.22rem;
            height: 0.88rem;
            color: #ffffff;
            font-size: 0.32rem;
            font-weight: 500;
            margin: auto;
            margin-top: 1.04rem;
            border-radius: 0.44rem;
            background: linear-gradient( 136deg, #6EC069 0%, #42A633 100%);
        }
    }
</style>
